<template>
    <div>
       	<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>分量设置</el-breadcrumb-item>
		</el-breadcrumb>

        <el-card>
			<!-- 搜索添加区 -->
			<el-row :gutter="20">
				<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
					<el-form-item label="用户名">
						<el-input v-model="queryInfo.AskerName" placeholder=""></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>
				
			</el-row>
			<!--用户列表区  -->
			<el-table :data="roleslist" border stripe>
				<el-table-column label="编号" prop="AskerId"></el-table-column>
				<el-table-column label="用户名" prop="AskerName"></el-table-column>
                <el-table-column label="角色" prop="RoleName"></el-table-column>
                <el-table-column label="权重" prop="Weight"></el-table-column>
				  <el-table-column label="备注" prop="BakContent"></el-table-column>
                  <el-table-column label="操作" width="240px">
					<template v-slot="scope">
						
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.AskerId)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 10, 20, 50]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
		</el-card>


        <!-- 修改用户的对话框 -->
		<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="editForm.AskerName" disabled></el-input>
				</el-form-item>
				<el-form-item label="权重" prop="email">
					<el-input v-model="editForm.Weight"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="mobile">
					<el-input v-model="editForm.BakContent"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editWeight">确定</el-button>
			</span>
		</el-dialog>
    </div>
</template>
<script>
  export default {
    data() {
      return {


				//获取用户列表的参数对象
				queryInfo: {
					AskerName:"",
                    
					//当前的页数
				},
				roleslist: [], //table数据
				page: 1,
				//当前每页显示多少条数据
				limit: 10,
				count: 0,
				//控制添加用户对话框的显示与隐藏
				addDialogVisible: false,
				//添加用户的表单数据
				addForm: {
					Name: '',
				},
				//添加表单的验证规则对象
				addFromRules: {
				
				},
				//控制修改用户对话框的显示与隐藏
				editDialogVisible: false,
				//查询到的用户信息对象
				editForm: {},
				// 修改表单的验证规则对象
				editFormRules: {
				},
				//控制分配角色对话框的显示与隐藏
				setRoleDialogVisible: false,
				// 需要被分配角色的用户信息
				userInfo: {},
				//所有角色的数据列表
				roleslist: {},
				//已选中的角色Id值
				selectedRoleId: ''
      }
    },
    created() {
			this.getWeightList()
		},
		methods: {
			async getWeightList() {
				const {
					data: res
				} = await this.$http.get('api/Weight/GetWeightList?page=' + this.page +
					"&limit=" + this.limit +
					"&AskerName=" + this.queryInfo.AskerName)
				console.log(res)
				if (res.code !== 0) {
					return this.$message.error('获取用户列表失败')
				}
				this.roleslist = res.data
				this.count = res.count

			},
			onSubmit(){
				this.getWeightList();
			},
			
			// 监听pagesize改变的事件
			handleSizeChange(newSize) {
				//console.log(newSize)
				this.limit = newSize
				this.getWeightList()
			},
			// 监听页码值改变的事件
			handleCurrentChange(newPage) {
				//console.log(newPage)
				this.page = newPage
				this.getWeightList()
			},
			//展示编辑用户的对话框
			async showEditDialog(AskerId) {
				console.log(AskerId)
				const {
					data: res
				} = await this.$http.get('api/Weight/GetWeightById?AskerId=' + AskerId)
				console.log(res)
				if (res.code !== 0) {
					return this.$message.error('查询用户信息失败!')
				}
				this.editForm = res.data
				this.editDialogVisible = true
			 },
             //监听修改用户对话框的关闭事件
			editDialogClosed() {
				this.$refs.editFormRef.resetFields()
			},
			// //修改用户信息并提交
			editWeight() {
				this.$refs.editFormRef.validate(async valid => {
					if (!valid) return
					//发起修改用户信息的数据请求
					const {
						data: res
					} = await this.$http.post('api/Weight/GetWeightEdit',this.editForm)
					console.log(res)
					if (res.code !== 0) {
						return this.$message.error('更新用户信息失败!')
					}
					//关闭对话框
					this.editDialogVisible = false
					//刷新数据列表
					this.getWeightList()
					//提示修改成功
					this.$message.success('更新用户信息成功!')
			   })
            },
            //  editWeight() {
            //     this.$http.post('api/Weight/GetWeightEdit',this.editForm).then(res=>{
            //     console.log(res)
            //     if (res.data.code == 0) {
            //         this.editDialogVisible = false
			// 		//刷新数据列表
			// 		this.getWeightList()
			// 		//提示修改成功
			// 		this.$message.success(res.msg)
			// 		}
            //     })
			// },
		
			


		},
		mounted: function() {
			this.getWeightList()
		},
		computed:function(){
			
		}

  };
</script>


<style Lang="less" scoped>

</style>